<template>
  <div class="welding-data scroll-wrap home-screen">
    <!-- <template v-if="!image">
      <div class="item item1" @click="viewHandle">
        <img src="~@/assets/img/unfinished.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item2" @click="viewHandle">
        <img src="~@/assets/img/finshed.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item3" @click="viewHandle">
        <img src="~@/assets/img/having.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item4" @click="viewHandle">
        <img src="~@/assets/img/waring.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item5" @click="viewHandle">
        <img src="~@/assets/img/having.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item6" @click="viewHandle">
        <img src="~@/assets/img/having.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item7" @click="viewHandle">
        <img src="~@/assets/img/finshed.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item8" @click="viewHandle">
        <img src="~@/assets/img/waring.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item9" @click="viewHandle">
        <img src="~@/assets/img/having.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item10" @click="viewHandle">
        <img src="~@/assets/img/site.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item11" @click="viewHandle">
        <img src="~@/assets/img/finshed.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item12" @click="viewHandle">
        <img src="~@/assets/img/finshed.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item13" @click="viewHandle">
        <img src="~@/assets/img/unfinished.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item14" @click="viewHandle">
        <img src="~@/assets/img/site.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
      <div class="item item15" @click="viewHandle">
        <img src="~@/assets/img/finshed.png" />
        <img class="base" src="~@/assets/img/base.png" />
      </div>
    </template> -->
    <div id="container"></div>
    <HeaderScreen :avatar="avatar" :name="name" />
    <ProjectList :projectList="projectList" />
    <Charts />
    <AlarmsList />
    <div class="projectNumber">
      <div>
        <span style="color: #ade883">{{ projectNumber.over }} </span>
        <div class="circle success"></div>
        <span>已完成项目</span>
      </div>
      <div>
        <span style="color: #52b9a1">{{ projectNumber.underWay }}</span>
        <div class="circle doing"></div>
        <span>进行中项目</span>
      </div>
      <div>
        <span style="color: #e2a5f1">{{ projectNumber.notBegin }}</span>
        <div class="circle pending"></div>
        <span>未开工项目</span>
      </div>
    
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import HeaderScreen from "./header/header-screen";
import ProjectList from "./components/projectList";
import Charts from "./components/charts";
import AlarmsList from "./components/alarmsList";

import { projectList, projectNumber } from "@/api/enterpriserSre";
import { mapGetters } from "vuex";
import { parseTime } from "@/utils";
export default {
  name: "Index",
  components: { HeaderScreen, ProjectList, Charts, AlarmsList },
  data() {
    return {
      map: null,
      projectList: [],
      projectNumber: {
        over: 0,
        underWay: 0,
        notBegin: 0,
        alarm: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["avatar", "name"]),
    spaceId() {
      return this.$store.getters.entSpaceId;
    },
  },
  created() {
    this.initMap();
  },

  methods: {
    initMap() {
      var spaceId= this.$store.getters.entSpaceId;

      var dx=6
      if( spaceId==="6351eaa9875a9342e39f150c"||  spaceId==="6351e9b2875a9342e39f1506"||  spaceId==="6351eea5875a9342e39f1514"){
          dx = 6;
        }else if(  spaceId==="6351eb5e875a9342e39f150e"||spaceId==="6351edd5875a9342e39f1512"||  spaceId==="637c8a99420a314d1f06fbbe"){
          dx = 7;
        }
      AMapLoader.load({
        key: "64c0abc63b66741d285e9ac538ab7b40", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom:dx,
            zooms: [5, 20], //初始化地图级别
            mapStyle: "amap://styles/darkblue",
          });

          return AMap;
        })
        .then((AMap) => {
          this.project(AMap);
          this.projectNum();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    project(AMap) {
      let params = {
        d: {
          page: {
            p: 1,
            ps: 9999,
          },
          c: [
            {
              key: "entSpaceId",
              value: this.spaceId,
            },
          ],
        },
      };
      projectList(params).then((res) => {
        this.projectList = res.result;
        let mapCenter =null;

       var spaceId= this.$store.getters.entSpaceId;
        if( spaceId==="6351eaa9875a9342e39f150c"||  spaceId==="6351e9b2875a9342e39f1506"||  spaceId==="6351eea5875a9342e39f1514"){
          mapCenter = [88.397428, 41.90923];
        }else if(  spaceId==="6351eb5e875a9342e39f150e"||spaceId==="6351edd5875a9342e39f1512"||  spaceId==="637c8a99420a314d1f06fbbe"){
          mapCenter = [99.397428, 38.90923];
        }
        
        this.projectList.map((item) => {
          let title = "项目信息";
          let content = [];
          let that = this;

          content.push(
            `<div><span>项目名称：</span><span>${item.screenName}</span></div>`
          );
          content.push(
            `<div><span>项目经理：</span><span>${
              item.userName ? item.userName : ""
            }</span></div>`
          );
          content.push(
            `<div><span>开始时间：</span><span>${parseTime(
              item.startTime
            )}</span></div>`
          );
          content.push(
            `<div><span>计划结束时间：</span><span>${parseTime(
              item.endTime
            )}</span></div>`
          );
          content.push(
            `<div><span>设备数量：</span><span>${
              item.deviceNum ? item.deviceNum : 0
            }</span></div>`
          );
          content.push(
            `<div><span>地址：</span><span>${
              (item.provinceName ? item.provinceName : "") +
              (item.cityName ? item.cityName : "") +
              (item.countryName ? item.countryName : "") +
              (item.streetName ? item.streetName : "") +
              (item.address ? item.address : "")
            }</span></div>`
          );
          let infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: createInfoWindow(title, content.join("<br/>")),
            offset: new AMap.Pixel(16, -30),
          });

          //构建自定义信息窗体
          function createInfoWindow(title, content) {
            var info = document.createElement("div");
            info.className = "custom-info input-card content-window-card";

            //可以通过下面的方式修改自定义窗体的宽高
            info.style.width = "400px";
            // 定义顶部标题
            var top = document.createElement("div");
            var titleD = document.createElement("div");
            var closeX = document.createElement("i");
            top.className = "info-top";
            titleD.innerHTML = title;
            closeX.className = "el-icon-close";
            closeX.onclick = closeInfoWindow;

            top.appendChild(titleD);
            top.appendChild(closeX);
            info.appendChild(top);

            // 定义中部内容
            var middle = document.createElement("div");
            middle.className = "info-middle";
            middle.innerHTML = content;
            info.appendChild(middle);
            return info;
          }

          //关闭信息窗体
          function closeInfoWindow() {
            that.map.clearInfoWindow();
          }
          function getColor(type) {
            switch (type) {
              case "over":
                return "#ade883";
              case "underWay":
                return "#52b9a1";
              case "notBegin":
                return "#e2a5f1";
              case "alarm":
                return "#f90032";
            }
          }
          if (item.latitude > -1 || item.longitude > -1) {
            let marker = new AMap.Marker({
              map: that.map,
              content:
                '<div><i class="el-icon-location" style="color:' +
                getColor(item.state) +
                ';font-size:24px;"></i></div>', // 自定义点标记覆盖物内容
              position: [item.longitude, item.latitude], // 基点位置
              offset: new AMap.Pixel(-17, -17), // 相对于基点的偏移位置
            });
            marker.on("click", function () {
              infoWindow.open(that.map, marker.getPosition());
            });

            if (mapCenter.length === 0) {
              mapCenter = [item.longitude, item.latitude];
            }
          }
        });
        
        this.map.setCenter(mapCenter);
      });
    },

    projectNum() {
      let params = {
        d: {
          c: [
            {
              key: "entSpaceId",
              value: this.spaceId,
            },
          ],
        },
      };
      projectNumber(params).then((res) => {
        this.projectNumber = res.result;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.welding-data {
  width: 1920px;
  position: relative;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

.projectNumber {
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  * {
    color: rgba(255, 255, 255, 0.7);
  }
  > div {
    margin: 0 15px;
    display: flex;
    align-items: center;
    span:nth-of-type(1) {
      font-size: 50px;
      margin-top: -15px;
      margin-right: 10px;
    }
    .circle {
      height: 15px;
      width: 15px;
      border-radius: 50%;
      margin-right: 5px;
    }
    .primary {
      color: #f7c581;
    }
    .success {
      background: #ade883;
    }
    .doing {
      background: #52b9a1;
    }
    .pending {
      background: #e2a5f1;
    }
    .danger {
      background: #f90032;
    }
    span:nth-of-type(2) {
    }
  }
}
</style>